<template>
  <div class="top-up">
    <xndj-header title="会员充值"></xndj-header>
    <div class="header">
      <p class="tips">您的账户余额</p>
      <div class="money">
        ￥0.00
      </div>
    </div>
    <div class="vip-card">
      <h3>会员卡号</h3>
      <p>880000123456</p>
    </div>
    <div class="select-money">
      <span 
        :class="{active:item===cur}"
        :key="index"
        v-for="(item,index) in moneys" 
        @click="cur=item"
      >
        {{ item }}元
      </span>
    </div>
    <div class="bottom">
      <p>应付：￥{{ cur }}</p>
      <button>立即充值</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "top-up",
  data() {
    return {
      cur: 100,
      moneys: [100, 200, 300, 400, 500, 600, 800, 1000]
    };
  },
  filters: {
    m(val) {
      if (typeof val !== "number" || val.toString().includes("."))
        return `￥${val}`;
      return `￥${val.toFixed(2)}`;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/lib/index.scss";
.top-up {
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 186px;
    // background: red;
    p {
      font-size: 16px;
    }
    .money {
      font-size: 60px;
      color: red;
    }
  }
  .vip-card {
    display: flex;
    // align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: $offset;
    height: 126px;
    background: #fff;
    border-top: 1px solid color(bc);
    border-bottom: 1px solid color(bc);
    p {
      font-size: 24px;
      font-weight: bold;
    }
  }
  .select-money {
    width: 100%;
    display: flex;

    justify-content: space-between;
    margin-top: $offset;
    flex-wrap: wrap;
    padding: 0 $offset;
    span {
      width: 30%;
      height: 123px;
      line-height: 123px;
      // background: red;
      font-size: 40px;
      background: #fff;
      border: 1px solid color(green);
      color: color(green);
      border-radius: 10px;
      margin-bottom: $offset;
      text-align: center;
      &.active{
        border-color: color(orange);
        color: color(orange);
      }
    }
  }
  .bottom{
    background: #000;
    height: 90px;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    p{
      color: #fff;
      font-size: 24px;
    }
    button{
      background: color(green);
      border: none;
      height: 100%;
      color: #fff;
      width: 248px;
      font-size: 24px;
      margin-left: 20px;
    }
  }
}
</style>